'use client';

interface Activity {
  id: string;
  title: string;
  description: string | null;
  metadata: {
    duration: string;
  } | null;
}

export function ActivityList({
  activities
}: {
  activities: Activity[];
}) {
  return (
    <div className="space-y-6">
      {activities.map((activity, index) => (
        <div key={activity.id} className="relative pl-8">
          {/* 连接线，最后一个活动不显示 */}
          {index !== activities.length - 1 && (
            <div className="absolute left-3 top-3 bottom-0 w-px bg-gray-200" />
          )}
          
          {/* 活动圆点 */}
          <div className="absolute left-0 top-1.5 w-6 h-6 rounded-full bg-blue-100 border-2 border-blue-500 flex items-center justify-center">
            <span className="text-sm text-blue-500">{index + 1}</span>
          </div>

          {/* 活动内容 */}
          <div className="bg-gray-50 rounded-lg p-4">
            <h3 className="font-semibold text-gray-900">{activity.title}</h3>
            <p className="mt-1 text-gray-600">{activity.description}</p>
            {activity.metadata?.duration && (
              <p className="mt-2 text-sm text-gray-500">
                预计时长：{activity.metadata.duration}
              </p>
            )}
          </div>
        </div>
      ))}
    </div>
  );
} 